<template>
  <div>
    <div>
      <el-select v-model="year" placeholder="请选择" @change="changHandle">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" placeholder="请选择月" @change="changHandle">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <el-calendar v-model="value">
      <template
        slot="dateCell"
        slot-scope="{ date }"
      >{{ date.getDate() }}
        <span
          v-if="getDayDay(date)"
          style="background: red; color: #fff"
        >休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data() {
    return {
      value: new Date(), //  2022-04
      options: [2021, 2022, 2023],
      year: new Date().getFullYear(),
      month: new Date().getMonth() + 1
    }
  },
  computed: {},
  created() {
    /* 如何将伪数组转换成真数组  */
    // console.log([...Array(11)]);
    // console.log(Array.from(Array(11)));
    var arr = Array.from(Array(11))
    arr.forEach((item, index) => {
      arr[index] = index - 5 + this.year
    })
    this.options = arr
  },

  methods: {
    getDayDay(date) {
      var day = date.getDay()
      if (day === 6 || day === 0) {
        return true
      } else {
        return false
      }
    },
    changHandle() {
      this.value = `${this.year}-${this.month}`
    }
  }
}
</script>
<style lang="scss" scoped>
/* 穿透
scss  ::v-deep
less  /deep/

*/
.el-calendar {
  ::v-deep .el-calendar__header {
    display: none;
  }
}
</style>
